﻿/*
文件上传
by freethy
20160526
使用方法
<input type="text" name="slide" />
$("[name=slide]").ptimg({accept:".jpg,.png,.jpeg,.gif"});

！！！！！！！！！！！！！！！！！！！！！！！！！！！！
 ！！！！！！！！！！！！！！！！！！！！！！！！！！！！
 次js被修改过，本项目专用，注意！！！！！！！！！！！！！！！！！
！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！
！！！！！！！！！！！！！！！！！！！！！！！！！！！！
*/


(function ($) {

    function ptimg(option) {
        option.input = $(this);
        option.input.hide();

        option.btn = $('<input type="button" value="添加附件" class="ptimg_btn" />');
        option.input.after(option.btn);

        option.container = $('<ul class="ptup_container"></ul>');
        option.input.after(option.container);

        //界面数据输出到文本框
        function tov() {
            var s = "[";
            var es = option.container.find("li");

            for (var i = 0; i < es.length; i++) {
                var src = $(es[i]).children("a:last").attr("href");
                if (src.indexOf('javascript') >= 0) continue;

                if (i != 0) {
                    s += ",";
                }

                s += "'" + src + "'";
            }
            s += "]";
            option.input.val(s);
        }

        //刷新界面
        function bind() {
            var val = option.input.val();
            var data;
            try {
                data = eval("(" + val + ")");
            } catch (e) {
                data = [];
            }

            if ((typeof data) == "object") {
                for (var i = 0; i < data.length; i++) {
                    add(data[i]);
                }
            }
        }

        //添加一个图片到界面
        function add(url) {
            if (url == "undefined" || !url) return;
            var suffix = url.substring(url.lastIndexOf(".") + 1).toLocaleLowerCase();//后缀名

            var src = url;
            var html = '<li>' +
                            '<a href="javascript:void(0);" class="pibtn left">←</a>' +
                            '<a href="javascript:void(0);" class="pibtn right">→</a>' +
                            '<a href="javascript:void(0);" class="pibtn del">X</a>' +
                            '<a href="' + url + '" target="_blank">' +
                            '<img src="' + src + '" />' +
                            '</a>' +
                        '</li>';
            if (option.type == 'show') {
                html = '<li><a href="' + url + '" target="_blank"><img src="' + src + '" /></a></li>';
            }
            if(suffix == 'mp4')
            {
                var html = '<li>' +
                    '<a href="javascript:void(0);" class="pibtn left" style="z-index:9999999 !important;">←</a>' +
                    '<a href="javascript:void(0);" class="pibtn right" style="z-index:9999999 !important;">→</a>' +
                    '<a href="javascript:void(0);" class="pibtn del" style="z-index:9999999 !important;">X</a>' +
                    '<a href="' + url + '" target="_blank">' +
                    '<video src="' + src + '" style="width:191px" controls="controls"/>' +
                    '</a>' +
                    '</li>';
            }
            if(suffix == 'mp3')
            {
                var html = '<li>' +
                    '<a href="javascript:void(0);" class="pibtn left" style="z-index:9999999 !important;">←</a>' +
                    '<a href="javascript:void(0);" class="pibtn right" style="z-index:9999999 !important;">→</a>' +
                    '<a href="javascript:void(0);" class="pibtn del" style="z-index:9999999 !important;">X</a>' +
                    '<a href="' + url + '" target="_blank">' +
                    '<video src="' + src + '" style="width:191px" controls="controls"/>' +
                    '</a>' +
                    '</li>';
            }
            option.container.append(html);
        }

        //选择文件
        function select(){

            //todo 临时这样就该,适应移动端
            // option.accept = 'image/*';

            var fileObj = document.createElement("input");
            fileObj.setAttribute("type", "file");
            fileObj.setAttribute("multiple", "multiple");
            fileObj.setAttribute("accept", option.accept);
            fileObj.setAttribute("style", "display:none");
            $(fileObj).change(function () {
                var index = layer.load(2, { shade:0.2 });
                var count = 0;
                for(var i=0;i<fileObj.files.length;i++){
                    var file = fileObj.files[i];
                    var form = new FormData();
                    form.append("file", file);
                    var xhr = new XMLHttpRequest();
                    xhr.open("post", "/api/upload/up", true);
                    xhr.onload = function (e) {
                        var html = e.currentTarget.responseText;
                        var obj = JSON.parse(html);
                        if(obj.code == 0) {
                            var url = obj.data.file_url;
                            add(url);
                            tov();
                        }
                    };
                    xhr.onloadend = function (e) {
                        layer.close(index);
                    }
                    xhr.send(form);
                }
            });
            $("body").append(fileObj);
            fileObj.click();
        };

        //左移
        function left(){
            if($(this).parent().prev()){
                $(this).parent().prev().before($(this).parent());
            }
            tov();
        }

        //右移
        function right(){
            if($(this).parent().next()){
                $(this).parent().next().after($(this).parent());
            }
            tov();
        }

        //删除文件
        function del(){
            $(this).parent().remove();
            tov();
        }

        option.btn.on("click",select);
        option.container.on("click", ".left", left);
        option.container.on("click", ".right", right);
        option.container.on("click", ".del", del);

        //刷新界面
        bind();
    }

    $.fn.extend({ ptimg: ptimg });

})(jQuery);


